<template>
  <div>
    <el-form
      label-position="right"
      id="gis-search-bar"
      class="gis-search-bar"
      inline
    >
      <div class="form-box" id="form-box">
        <!-- 公共区域 start -->
        <div :class="`public-area  `" v-show="$route.name != '健康检查'">
          <!-- 运营商 -->
          <el-form-item>
            <div class="tag-select">
              <el-select size="mini" v-model="mnc">
                <el-option
                  v-for="item in mncList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </el-form-item>

          <!-- <el-form-item label="">
            <el-select
              size='mini'
              v-model="network"
            >
              <el-option
                v-for="(item,index) in networkList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->

          <span class="public-border"> | </span>

          <el-form-item label="" v-show="routeAreaType != 5">
            <el-select
              size="mini"
              v-model="ptMonth"
              :disabled="routeAreaType == 5"
            >
              <el-option
                v-for="(item, index) in monthList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <span class="public-border" v-show="routeAreaType != 5"> | </span>

          <el-form-item label="区县" v-show="showZone">
            <el-select size="mini" v-model="zoneId" @change="handleZoneId">
              <el-option
                v-for="(item, index) in zoneList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="街道" v-show="showZone">
            <el-select
              class="customInput1"
              size="mini"
              :disabled="townId == null"
              v-model="townId"
            >
              <el-option
                v-for="(item, index) in townList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <span class="public-border" v-show="showZone && showNetwork">
            |
          </span>
          <el-form-item label="分公司" v-show="showNetwork">
            <el-select size="mini" v-model="companyId">
              <el-option
                v-for="(item, index) in companyList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="网格" v-show="showNetwork">
            <el-select
              size="mini"
              :disabled="networkGridId == null"
              v-model="networkGridId"
            >
              <el-option
                v-for="(item, index) in networkGridList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="微格" v-show="showNetwork">
            <el-select
              class="customInput1"
              size="mini"
              :disabled="microGridId == null"
              v-model="microGridId"
            >
              <el-option
                v-for="(item, index) in microGridList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <!-- <span class="public-border"  > | </span>   -->
        </div>
        <!-- 公共区域 end -->
        <div class="right-area" v-show="$route.name != '健康检查'">
          <el-form-item v-if="routeAreaType != 5">
            <el-autocomplete
              size="mini"
              class="customInput"
              popper-class="search-hint-box"
              :fetch-suggestions="querySearch"
              :trigger-on-focus="false"
              v-model="keyWord"
              value-key="name"
              placeholder="请输入关键字"
              @change="changeKeyWordNull"
              @select="selectSearchWord"
            >
              <i class="el-icon-search el-input__icon" slot="suffix"> </i>
              <template slot-scope="{ item }">
                <div v-show="item">
                  <i class="el-icon-search el-input__icon"></i>
                  <span class="name" :title="item.name">{{ item.name }}</span>
                  <!-- <span class="addr">{{ item.address }}</span> -->
                </div>
                <div v-show="!item" style="textalign: center">暂无数据</div>
              </template>
            </el-autocomplete>
          </el-form-item>

          <el-button
            v-if="routeAreaType != 5"
            class="margin-right10"
            type="primary"
            size="mini"
            :disabled="offset !== null"
            @click.stop="showFilterBox"
            >高级筛选</el-button
          >

          <el-form-item
            label=""
            class="alone"
            v-show="$route.name != '健康检查'"
          >
            <el-switch
              :title="'对比分析'"
              :disabled="
                routeAreaType == 5
                  ? type == 11 || type == 13
                    ? true
                    : false
                  : compareDisabled
              "
              v-model="compare"
            ></el-switch>
          </el-form-item>
        </div>

        <!-- <div class="search-box"  v-show=" $route.name != '健康检查'" >
          <el-form-item>
              <el-input
                size="mini"
                placeholder="请输入关键字"
                suffix-icon="el-icon-search"
                v-model="keyWord"
              >
              </el-input>
          </el-form-item>
        </div> -->

        <div id="bottom-box" class="bottom-box" v-show="routeAreaType != null">
          <!-- <el-form-item  label="场景:" v-show="routeAreaType == 3 ">
            <el-select
              size='mini'
              v-model="areaType"
            >
              <el-option
                v-for="item in areaTypeList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="" v-show="routeAreaType == 1">
            <el-radio-group
              class="analysis-box hide-first-box"
              v-model="network"
              size="mini"
            >
              <el-radio-button
                v-for="(item, index) in userAnalysisTypeArr"
                v-show="index !== 0"
                :disabled="judgePre(item.permission)"
                :key="index"
                :label="item.value"
                @click.native.prevent="
                  () => {
                    judgePre(item.permission)
                      ? null
                      : judgeSame(item.value, 'network')
                  }
                "
              >
                {{ item.label }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="" v-show="routeAreaType == 2">
            <el-radio-group
              class="analysis-box hide-first-box"
              v-model="network"
              size="mini"
            >
              <el-radio-button
                v-for="(item, index) in offsetListNew"
                v-show="index !== 0"
                :key="index"
                :label="item.value"
                @click.native.prevent="
                  () => {
                    judgeSame(item.value, 'network')
                  }
                "
              >
                {{ item.label }}
              </el-radio-button>
            </el-radio-group>
            <!-- <el-radio-group -t
              class="analysis-box hide-first-box"
              v-model="offset"
              size="mini"
            >
              <el-radio-button
                v-for="(item, index) in offsetList"
                v-show="index !== 0"
                :key="index"
                :label="item.value"
                @click.native.prevent="judgeSame(item.value, 'offset')"
              >
                {{ item.label }}
              </el-radio-button>
            </el-radio-group> -->
          </el-form-item>

          <el-form-item label="" v-show="routeAreaType == 3">
            <el-radio-group
              class="analysis-box hide-first-box"
              v-model="areaType"
              size="mini"
            >
              <el-radio-button
                v-for="(item, index) in areaTypeList"
                v-show="index !== 0"
                :key="index"
                :label="item"
                @click.native.prevent="judgeSame(item, 'areaType')"
              >
                {{ item }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>

          <!-- <el-form-item  label="" v-show="routeAreaType == 4 ">
            <el-radio-group class="analysis-box hide-first-box" v-model="userType" size='mini'>
              <el-radio-button
                v-for="(item,index) in userTypeArr"
                v-show="index !== 0"
                :key="index"
                :label="index "
                :disabled="index > 3"
                @click.native.prevent="() => { index > 3 ? null : judgeSame( index ,'userType') }"
              >
                {{ item }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item> -->

          <el-form-item label="" v-show="routeAreaType == 4">
            <el-radio-group
              class="analysis-box hide-first-box"
              v-model="userType"
              size="mini"
            >
              <el-radio-button
                v-for="(item, index) in userTypeArr"
                v-show="index !== 0"
                :key="index"
                :label="index"
                :disabled="index > 3"
                @click.native.prevent="
                  () => {
                    judgeSame(index, 'userType', index > 3)
                  }
                "
              >
                {{ item }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <div v-show="routeAreaType == 5" class="lt-btn-box">
            <el-form-item label="" v-if="townId != null && townId != '全部'">
              <el-radio-group
                class="analysis-box hide-first-box"
                v-model="type"
                size="mini"
              >
                <el-radio-button
                  v-for="(item, index) in researchTypeArr"
                  v-show="index !== 0"
                  :key="index"
                  :label="item.value"
                  @click.native.prevent="
                    () => {
                      judgeSame(item.value, 'type')
                    }
                  "
                >
                  {{ item.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>

        <!-- <div v-show="routeAreaType == 5" class="right-box-go-back" -t>
          <el-button @click="reset" size="mini" class="m-r-sm btn-back"
            >返回</el-button
          >
        </div> -->
        <!-- 健康检查内容 -->
        <div class="public-area-two" v-show="$route.name == '健康检查'">
          <!-- 运营商 -->
          <el-form-item>
            <el-tag>
              {{
                mncList.find(item => {
                  return item.value == mnc
                }).label
              }}
            </el-tag>
          </el-form-item>
          <el-form-item label="角度分析" v-show="$route.name == '健康检查'">
            <el-radio-group
              class="analysis-box"
              v-model="perspective"
              size="mini"
            >
              <el-radio-button
                v-for="(item, index) in perspectiveList"
                :key="index"
                :label="index + 1"
              >
                {{ item }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="年月">
            <el-select size="mini" v-model="ptMonth">
              <el-option
                v-for="(item, index) in monthList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item :label="'网络类型'">
            <el-select size="mini" v-model="stateType">
              <el-option
                v-for="(item, index) in stateTypeList"
                :key="index"
                :label="item"
                :value="index + 1"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="经纬度偏差分析" v-if="perspective == '1'">
            <el-select size="mini" v-model="longitudeType">
              <el-option
                v-for="(item, index) in longitudeTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item v-if="perspective == '2'" label="方位角偏差分析">
            <el-select size="mini" v-model="azimuthType">
              <el-option
                v-for="(item, index) in azimuthTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>

        <div class="right-area-two" v-show="$route.name == '健康检查'">
          <div v-show="lastImportParamTime">
            <span>上次导入工参时间: </span>
            <span> {{ lastImportParamTime }} </span>
          </div>
          <div>
            <el-button
              @click="$router.push('/home/upload')"
              type="primary"
              size="mini"
              >导入工参</el-button
            >
          </div>
        </div>
      </div>
    </el-form>
    <div
      class="search-switchs"
      v-show="$route.name != '健康检查' && routeAreaType != 5"
    >
      <div v-if="network != '7+' && routeAreaType == 1">
        <span>数据指标:</span>
        <el-switch :value="stateListStatus" @change="setStateListStatus">
        </el-switch>
      </div>
      <div
        v-show="routeAreaType == 1 || (routeAreaType == 2 && network == '6+')"
      >
        <span>场景数据:</span>
        <el-switch :value="sceneStatus" @change="setSceneStatus"> </el-switch>
      </div>
      <div v-show="routeAreaType == 2 && network == '6+'">
        <span>栅格数据:</span>
        <el-switch :value="gridStatus" @change="setGridStatus"> </el-switch>
      </div>
    </div>
    <div v-show="compare">
      <comparison></comparison>
    </div>

    <div class="map-legend" v-show="$route.name == '健康检查'">
      <div class="longitude-legend" v-if="perspective == '1'">
        <div>
          <img src="/Gis/assets/images/redSite.png" alt="" />
          <span>预测位置</span>
        </div>

        <div>
          <img src="/Gis/assets/images/blueSite.png" alt="" />
          <span>工参位置</span>
        </div>
      </div>

      <div class="azimuth-legend" v-if="perspective == '2'">
        <div>
          <span></span>
          <span>预测位置 </span>
        </div>
        <div>
          <span></span>
          <span>工参位置</span>
        </div>
      </div>
    </div>

    <div class="map-bottom-left-box">
      <div class="map-select-box">
        <div
          v-for="(item, index) in mapList"
          :key="index"
          v-show="item.id !== mapId"
          @click="mapId = item.id"
        >
          <img :src="item.src" />
          <span>{{ item.name }}</span>
        </div>
      </div>
      <Progress
        v-if="routeAreaType == 5 && townId != null && townId != '全部'"
      />
    </div>

    <!-- 筛选项弹框 -->
    <div class="filter-dialog" @mousedown.stop @mouseup.stop>
      <el-dialog
        :title="`筛选: ${
          userType === null && areaType === null
            ? zoneId === null
              ? microGridId == null
                ? '网格'
                : microGridId == '全部'
                ? '微格'
                : '场景'
              : townId == null
              ? '区县'
              : townId == '全部'
              ? '街道'
              : '场景'
            : '场景'
        }列表`"
        :visible.sync="filterDialog"
        width="450px"
        :modal-append-to-body="false"
        @closed="cancelFilterBox"
        :close-on-click-modal="false"
      >
        <div class="filter-content">
          <div>
            <div class="filter-content-box">
              <!--  -->
              <el-alert title="覆盖率和份额数值范围为0到1" type="warning">
              </el-alert>
              <!--  -->
              <div>
                <div>
                  <el-select
                    size="small"
                    v-model="currentName"
                    @change="getCurrentFilter"
                  >
                    <el-option
                      v-for="item in allAttrList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <div></div>
              </div>
              <div>
                <div>
                  <el-select
                    size="small"
                    v-model="
                      currentDataSelect.conditionalValueList[0].condition
                    "
                  >
                    <el-option
                      v-for="item in filterAttrToListName[
                        currentDataSelect.selectName
                      ]"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <div>
                  <el-input
                    size="small"
                    type="number"
                    placeholder="数值范围为0到1"
                    v-model="currentDataSelect.conditionalValueList[0].value"
                  ></el-input>
                </div>
              </div>
              <div>
                <div>
                  <el-radio v-model="currentDataSelect.andOr" :label="1"
                    >且</el-radio
                  >
                </div>
                <div>
                  <el-radio v-model="currentDataSelect.andOr" :label="2"
                    >或</el-radio
                  >
                </div>
              </div>
              <div>
                <div>
                  <el-select
                    size="small"
                    v-model="
                      currentDataSelect.conditionalValueList[1].condition
                    "
                  >
                    <el-option
                      v-for="item in filterAttrToListName[
                        currentDataSelect.selectName
                      ]"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <div>
                  <el-input
                    size="small"
                    type="number"
                    placeholder="数值范围为0到1"
                    v-model="currentDataSelect.conditionalValueList[1].value"
                  ></el-input>
                </div>
              </div>
            </div>
            <div>
              <el-button @click="setTableFilter">新增</el-button>
            </div>
          </div>
          <div class="filter-rule">
            <div>筛选规则: <span>点击删除规则</span></div>
            <div>
              <div
                v-for="item in allAttrList"
                title="点击删除规则"
                :key="item.id"
                v-show="showGetRule(item.id, dataSelectList)"
                @click="delRule(item.id)"
              >
                {{
                  item.id
                    | getRule(dataSelectList, filterAttrToListName, allAttrList)
                }}
              </div>
            </div>
          </div>
        </div>
        <div slot="footer">
          <el-button @click="cancelFilterBox">取消</el-button>
          <el-button type="primary" @click="affirmTableFilter">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, createNamespacedHelpers } from 'vuex'
import { getAllBoundary } from '@/apis/gis'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm,
  mapActions: mapActionsForm
} = createNamespacedHelpers('gisForm')
const { mapState: mapStatePage } = createNamespacedHelpers('gisPage')

import Comparison from './comparison'
import { debounce } from '@/utils'
import Progress from '../progress/index.vue'

let fromPath
export default {
  name: 'SearchBar',
  components: { Comparison, Progress },
  props: {
    showFilterList: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState(['home', 'gisForm', 'gisPage']),
    ...mapGetters(['userInfo', 'formData']),
    ...mapStatePage(['gisObj']),
    ...mapStateForm([
      'routeAreaType',
      'mncList', // 运营商可选列表
      'monthList', //月份列表
      'zoneList', //区县列表
      'townList', //街道列表
      'sceneStatus',
      'companyList', //分公司列表
      'networkGridList', //网格列表
      'microGridList', //微格列表
      'stateListStatus',
      'areaTypeList', // 场景列表
      'offsetList', //网络分析列表
      'searchWordList',
      'dataSelectList',
      'type', //春促栅格类型
      'goBackType',
      'gridStatus'
    ]),
    //运营商 0:移动, 1:联通， 11：电信
    mnc: {
      get() {
        return this.gisForm.mnc
      },
      set(nv) {
        this.setMnc(nv)
      }
    },
    // //  1+4':4G网络覆盖,'1+5' :5G网络覆盖,'4+4':4G网络质量,'4+5':5G网络质量
    // // '3+4':4G用户分布,'3+5':5G用户分布,'5+4':4G漫入用户分布,'5+5':5G漫入用户分布
    // network:{
    //   get() { return this.gisForm.network },
    //   set(nv) { this.setNetwork(nv) }
    // },
    // 月份
    ptMonth: {
      get() {
        return this.gisForm.ptMonth
      },
      set(nv) {
        this.setPtMonth(nv)
      }
    },
    // 区域id
    zoneId: {
      get() {
        return this.gisForm.zoneId
      },
      set(nv) {
        this.setZoneId({ data: nv, getBoundary: this.routeAreaType == 5 })
      }
    },
    // 街道id
    townId: {
      get() {
        return this.gisForm.townId
      },
      set(nv) {
        const status = this.routeAreaType == 5
        this.setTownId({ data: nv, status })
      }
    },
    // 分公司id
    companyId: {
      get() {
        return this.gisForm.companyId
      },
      set(nv) {
        this.setCompanyId({ data: nv })
      }
    },
    // 网格id
    networkGridId: {
      get() {
        return this.gisForm.networkGridId
      },
      set(nv) {
        this.setNetworkGridId({ data: nv })
      }
    },
    // 微格id
    microGridId: {
      get() {
        return this.gisForm.microGridId
      },
      set(nv) {
        this.setMicroGridId({ data: nv })
      }
    },
    // 搜索词
    keyWord: {
      get() {
        return this.gisForm.keyWord
      },
      set(nv) {
        // debounce(()=>{
        this.setKeyWord({ keyWord: nv })
        // },1000)
      }
    },
    // 用户分析
    network: {
      get() {
        return this.gisForm.network
      },
      set(nv) {
        this.setNetwork(nv)

        // console.log(nv == '7+')
      }
    },
    // 场景
    areaType: {
      get() {
        return this.gisForm.areaType
      },
      set(nv) {
        this.setAreaType(nv)
      }
    },
    // 商机类型
    userType: {
      get() {
        return this.gisForm.userType
      },
      set(nv) {
        this.setUserType(nv)
      }
    },
    // 筛选网络的条件
    offset: {
      get() {
        return this.gisForm.offset
      },
      set(nv) {
        // this.setFilterPageNum(1)
        this.setOffset(nv)
      }
    },
    type: {
      get() {
        return this.gisForm.type
      },
      set(nv) {
        // this.setFilterPageNum(1)
        this.setType(nv || 11)
      }
    },
    // 经纬度分析：1，方位角分析：2
    perspective: {
      get() {
        return this.gisForm.perspective
      },
      set(nv) {
        this.setPerspective(nv)
      }
    },
    //网络类型
    stateType: {
      get() {
        return this.gisForm.stateType
      },
      set(nv) {
        this.setStateType(nv)
      }
    },
    //经纬度偏差
    longitudeType: {
      get() {
        return this.gisForm.longitudeType
      },
      set(nv) {
        this.setLongitudeType(nv)
      }
    },
    //方位差偏差
    azimuthType: {
      get() {
        return this.gisForm.azimuthType
      },
      set(nv) {
        this.setAzimuthType(nv)
      }
    },
    //地图 类型
    mapId: {
      get() {
        return this.gisForm.mapId
      },
      set(nv) {
        this.setMapId(nv)
      }
    },
    stateListState: {
      get() {
        return this.gisForm.mapId
      },
      set(nv) {
        this.setMapId(nv)
      }
    },
    //对比
    compare: {
      get() {
        return this.gisForm.compare
      },
      set(nv) {
        this.setCompare(nv)
      }
    },
    showZone() {
      return this.routeAreaType == 5
        ? true
        : this.home.userInfoVo.authorities.indexOf('zone-sort') !== -1
        ? true
        : false
    },
    showNetwork() {
      return this.routeAreaType == 5
        ? false
        : this.home.userInfoVo.authorities.indexOf('net-grid-sort') !== -1
        ? true
        : false
    }
  },
  data: () => ({
    userAnalysisTypeArr: [
      { label: null, value: null },
      // { label: '新增用户', value: '7+', permission: 'newUsers' },
      // { label: '5G用户4G网络', value: '6+', permission: 'fiveInFour' }
      { label: '所有用户', value: '3+', permission: 'fiveInFour' },
      { label: '新增用户', value: '7+', permission: 'newUsers' }
    ],
    researchTypeArr: [
      { label: null, value: null },
      { label: '异地异网', value: 11 },
      { label: '漫入用户', value: 12 },
      { label: '异网用户', value: 13 },
      { label: '5G用户', value: 14 },
      { label: '总用户', value: 15 }
    ],
    offsetListNew: [
      { label: null, value: null },
      { label: '4G网络覆盖', value: '1+4', permission: 'fiveInFour' },
      { label: '5G网络覆盖', value: '1+5', permission: 'fiveInFour' },
      { label: '5G用户4G网络', value: '6+', permission: 'fiveInFour' }
    ],
    userTypeArr: [
      null,
      '网络差用户好',
      '网络好用户差',
      '网络差用户差',
      '集团预警',
      '漫入预警'
    ],
    perspectiveList: ['经纬度分析', '方位角分析'],
    stateTypeList: ['全部', '4G基站', '5G基站'],
    longitudeTypeList: [
      { label: '全部', value: 1 },
      { label: '经纬度偏差[1km，2km)', value: 2 },
      { label: '经纬度偏差[2km，5km)', value: 3 },
      { label: '经纬度偏差[5km，+∝)', value: 4 }
    ],
    azimuthTypeList: [
      { label: '全部', value: 1 },
      { label: '方位角偏差[120°,180°]', value: 2 },
      { label: '方位角偏差[60°,120°)', value: 3 }
    ],

    lastImportParamTime: null, //上次导入工参时间

    mapList: [
      { src: '/img/floor-plan.png', name: '平面图', id: 1 },
      { src: '/img/satellite-imagery.png', name: '卫星图', id: 2 }
    ],

    windowWidth: 1920, //窗口宽度

    compareDisabled: false,
    compareDisabledTimer: null,

    // 区县权限显示
    // showZone: false,
    // 网格权限显示
    // showNetwork: false,

    filterDialog: false,
    // 当前显示的筛选名
    currentName: '',
    // 当前显示的筛选项
    currentDataSelect: {
      selectName: '',
      andOr: 1,
      conditionalValueList: [
        {
          condition: 1,
          value: null
        },
        {
          condition: 2,
          value: null
        }
      ]
    },
    // 所有可选筛选项
    allAttrList: [
      { name: '移动4G覆盖率', id: 'mobileCoverRate' },
      { name: '联通4G覆盖率', id: 'unicomCoverRate' },
      { name: '电信4G覆盖率', id: 'telecomCoverRate' },
      { name: '移动常驻用户份额', id: 'mobileRatio' },
      { name: '联通常驻用户份额', id: 'unicomRatio' },
      { name: '电信常驻用户份额', id: 'telecomRatio' },
      { name: '移动归属用户份额', id: 'mobileBelongRatio' },
      { name: '联通归属用户份额', id: 'unicomBelongRatio' },
      { name: '电信归属用户份额', id: 'telecomBelongRatio' }
      // { name: '总用户数', id: 'numAll' }
    ],

    // 筛选条件(用于除覆盖和份额的普通项)
    relationList: [
      { name: null, id: null },
      { name: '等于', id: 1 },
      { name: '不等于', id: 2 },
      { name: '大于', id: 3 },
      { name: '大于或等于', id: 4 },
      { name: '小于', id: 5 }
    ],
    // 筛选条件(用于覆盖)
    coverRelationList: [
      { name: null, id: null },
      { name: '等于', id: 1 },
      { name: '不等于', id: 2 },
      { name: '大于', id: 3 },
      { name: '大于或等于', id: 4 },
      { name: '小于', id: 5 },
      { name: '弱于竞对-任意一家', id: 6 },
      { name: '弱于竞对-两家', id: 7 },
      { name: '强于竞对-任意一家', id: 8 },
      { name: '强于竞对-两家', id: 9 }
    ],
    // 筛选条件(用于份额)
    ratioRelationList: [
      { name: null, id: null },
      { name: '等于', id: 1 },
      { name: '不等于', id: 2 },
      { name: '大于', id: 3 },
      { name: '大于或等于', id: 4 },
      { name: '小于', id: 5 },
      { name: '弱于全市均值(百分点)', id: 10 },
      { name: '高于全市均值(百分点)', id: 11 }
    ],
    // 筛选项对应筛选条件列
    filterAttrToListName: {}
  }),
  watch: {
    'gisPage.gisMapMounted'(nv) {
      // alert(nv);
      if (nv) {
        // 设定计时器 因为 无法判断地图 定位是否加载完成
        if (this.compareDisabledTimer) {
          clearTimeout(this.compareDisabledTimer)
        }

        this.compareDisabledTimer = setTimeout(() => {
          this.compareDisabled = false
        }, 1000)
      } else {
        this.compareDisabled = true
        clearTimeout(this.compareDisabledTimer)
      }
      console.log(nv, 'gisMapMounted')
    },
    'gisForm.network'(nv) {
      if (nv == '7+') {
        // if (nv == '7+' || nv == '6+') {
        this.compareDisabled = true
      } else {
        this.compareDisabled = false
      }
    }
  },

  filters: {
    getRule(name, list, toList, strList) {
      let copyList = JSON.parse(JSON.stringify(list))
      // console.log( name, copyList, toList, strList );
      let item = copyList.find(v => v.selectName == name)
      let ruleStr = ''

      if (item !== undefined) {
        let name = strList.find(v => v.id == item.selectName).name
        let relationList = toList[item.selectName]
        let str1 =
          relationList.find(v => v.id == item.conditionalValueList[0].condition)
            .name + item.conditionalValueList[0].value
        let str2 =
          item.conditionalValueList[1].condition !== null
            ? item.andOr == 1
              ? '且'
              : '或'
            : null
        let str3 =
          item.conditionalValueList[1].condition !== null
            ? relationList.find(
                v => v.id == item.conditionalValueList[1].condition
              ).name + item.conditionalValueList[1].value
            : null
        let p2 =
          str2 == null || str3 == null ? '' : `${str2} [ ${name} ] ${str3} `

        ruleStr = `[ ${name} ] ${str1}${p2} `
      }
      return ruleStr
    }
  },
  filters: {
    getRule(name, list, toList, strList) {
      let copyList = JSON.parse(JSON.stringify(list))
      // console.log( name, copyList, toList, strList );
      let item = copyList.find(v => v.selectName == name)
      let ruleStr = ''

      if (item !== undefined) {
        let name = strList.find(v => v.id == item.selectName).name
        let relationList = toList[item.selectName]
        let str1 =
          relationList.find(v => v.id == item.conditionalValueList[0].condition)
            .name + item.conditionalValueList[0].value
        let str2 =
          item.conditionalValueList[1].condition !== null
            ? item.andOr == 1
              ? '且'
              : '或'
            : null
        let str3 =
          item.conditionalValueList[1].condition !== null
            ? relationList.find(
                v => v.id == item.conditionalValueList[1].condition
              ).name + item.conditionalValueList[1].value
            : null
        let p2 =
          str2 == null || str3 == null ? '' : `${str2} [ ${name} ] ${str3} `

        ruleStr = `[ ${name} ] ${str1}${p2} `
      }
      return ruleStr
    }
  },

  mounted() {
    // 获取上次导入工参时间
    this.getImportTime()
    // 表单高度
    const searchBar = document.getElementById('gis-search-bar')
    // 头部的最底部筛选
    const bottomBox = document.getElementById('bottom-box')
    // 获取高度
    const formBox = document.getElementById('form-box')
    const formBoxH = formBox.offsetHeight
    searchBar.style.height = formBoxH + 'px'
    bottomBox.style.top = 10 + formBoxH + 'px'
  },

  created() {
    // 设置 筛选项对应筛选条件列
    this.filterAttrToListName = {
      numAll: this.relationList,
      mobileCoverRate: this.coverRelationList,
      unicomCoverRate: this.coverRelationList,
      telecomCoverRate: this.coverRelationList,
      mobileRatio: this.ratioRelationList,
      unicomRatio: this.ratioRelationList,
      telecomRatio: this.ratioRelationList,
      mobileBelongRatio: this.ratioRelationList,
      unicomBelongRatio: this.ratioRelationList,
      telecoBelongRatio: this.ratioRelationList
    }
    // 关于 默认筛选列表的 调用方法
    this.setMnc(this.home.userInfoVo.mnc)
    this.setMonthList()
    this.zoneId = this.home.userInfoVo.cityId
    this.changeZoneList()
    this.changeNetworkGridList()
    this.changeCompanyList()
    this.changeAreaTypeList()
    // 判断路由
    if (this.$route.path == '/gisPage/user') {
      this.setRouteType(1)
    } else if (
      this.$route.path == '/gisPage/network' ||
      this.$route.path == '/gisPage/thematic-research'
    ) {
      // this.setNetwork('1+4');
      this.setRouteType(2)
    } else {
      this.setRouteType(null)
    }

    // 设置 权限判断

    // this.showZone =
    //   this.routeAreaType == 5
    //     ? true
    //     : this.home.userInfoVo.authorities.indexOf('zone-sort') !== -1
    //     ? true
    //     : false
    // this.showNetwork =
    //   this.routeAreaType == 5
    //     ? false
    //     : this.home.userInfoVo.authorities.indexOf('net-grid-sort') !== -1
    //     ? true
    //     : false
    if (this.routeAreaType == 5) {
      this.setType(11)
    }
    // 监控 窗口宽度
    this.windowWidth = window.innerWidth
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth
    })
  },
  methods: {
    ...mapMutationsForm([
      'setRouteType', //用户： 1， 网络：2
      'setMnc', //运营商 0:移动, 1:联通， 11：电信
      //  1+4':4G网络覆盖,'1+5' :5G网络覆盖,'4+4':4G网络质量,'4+5':5G网络质量
      // '3+4':4G用户分布,'3+5':5G用户分布,'5+4':4G漫入用户分布,'5+5':5G漫入用户分布
      'setNetwork',
      'setPtMonth', //月份
      'setZoneId', //区域
      'setTownId', //街道id
      'setCompanyId', //分公司
      'setNetworkGridId', //网格
      'setMicroGridId', //微格
      'setKeyWord', // 搜索词
      'setUserAnalysisType', //用户分析类型
      'setAreaType', //场景类型
      'setUserType', //商机类型
      'setOffset', //筛选网络的条件
      'setPerspective', // 经纬度分析：1，方位角分析：2
      'setStateType', //网络类型
      'setLongitudeType', //经纬度偏差
      'setAzimuthType', //方位角偏差
      'setMapId', //设置地图平面or卫星
      'setCompare', //开启对比
      'setFilterTotal',
      'setGridStatus',
      'setFilterPageNum',
      'setMncList', // 运营商可选列表
      'setMonthList', //月份列表
      // 'setNetworkList', //网络制式列表
      'setUserLineId',
      'setDataSelectList',
      'setType', //筛选春促栅格类型
      'setBackType',
      'setStateListStatus',
      'setAllBoundaryType',
      'setModalFlag',
      'setIndicatorType',
      'setSceneStatus'
    ]),
    ...mapActionsForm([
      'changeZoneList',
      'changeNetworkGridList',
      'changeAreaTypeList',
      'changeCompanyList',
      'initBoundary'
    ]),

    // 判断 (栅格选项,关联分析) 同属性是否点击相同
    judgeSame(item, attr, disabled = false) {
      if (disabled) return false
      item === this[attr] ? (this[attr] = null) : (this[attr] = item)
    },

    // 获取上次导入工参时间
    getImportTime() {
      this.api.getReferenceLastTime().then(res => {
        if (res.code == 1) {
          this.lastImportParamTime = res.data
        }
      })
    },
    // 搜索框 获取 搜索词
    async querySearch(queryString, cb) {
      if (!queryString) {
        cb([])
      } else {
        let list = this.searchWordList
        // 调用 callback 返回建议列表的数据
        if (list.length == 0) {
          cb([''])
        } else {
          cb(list)
        }
      }
    },
    // 选择搜索框的词的回调
    selectSearchWord(nv) {
      console.log('selectSearchWord', nv)
      if (nv) {
        this.setUserLineId({ data: nv.typeId, jumpMap: true, ifSearch: true })
      }
    },

    // 搜索框 为空的判断
    changeKeyWordNull(nv) {
      console.log('changeKeyWordNull', nv)
    },

    // 获取 当前筛选项参数
    getCurrentFilter(e) {
      // 首先在总列表里找到对应字段
      let selectName = this.currentName
      let list = JSON.parse(JSON.stringify(this.dataSelectList))
      let currentFilter = list.find(v => v.selectName == selectName)
      console.log(selectName, list, currentFilter)

      if (currentFilter === undefined) {
        this.currentDataSelect = {
          selectName: selectName,
          andOr: 1,
          conditionalValueList: [
            {
              condition: 1,
              value: null
            },
            {
              condition: null,
              value: null
            }
          ]
        }
      } else {
        this.currentDataSelect = currentFilter
      }
    },

    // 打开筛选弹框
    showFilterBox() {
      this.currentName = this.allAttrList[0].id
      this.getCurrentFilter()
      this.filterDialog = true
    },
    // 关闭弹框
    cancelFilterBox() {
      this.filterDialog = false
    },

    // 设置筛选项
    setTableFilter() {
      let list = JSON.parse(JSON.stringify(this.dataSelectList))
      let item = this.currentDataSelect
      // 先对筛选项 做基础判断
      // console.log( item, list );
      if (
        item.conditionalValueList[0].condition == null ||
        item.conditionalValueList[0].value == null ||
        (item.conditionalValueList[1].value == null &&
          item.conditionalValueList[1].condition != null)
      ) {
        this.$message({
          message: '请正确填写筛选项!',
          type: 'warning'
        })
        return false
      }
      if (list.find(v => v.selectName == item.selectName) == undefined) {
        // 当前选择项不存在
        list.push(item)
      } else {
        // 当前选择项存在
        let index = list.findIndex(v => v.selectName == item.selectName)
        list.splice(index, 1)
        list.push(item)
      }

      this.setDataSelectList(list)

      // 清除 对象地址相同 修改选项会变的情况；
      this.getCurrentFilter()
      return true
    },

    // 确定筛选项
    affirmTableFilter() {
      let flog = this.setTableFilter()
      if (flog) this.cancelFilterBox()
    },

    // 筛选规则是否显示
    showGetRule(name, list) {
      let reg = false
      let item = list.find(v => v.selectName == name)
      if (item !== undefined) {
        reg = true
      }
      return reg
    },

    // 删除规则
    delRule(name) {
      let list = JSON.parse(JSON.stringify(this.dataSelectList))
      let index = list.findIndex(v => v.selectName == name)
      list.splice(index, 1)
      this.setDataSelectList(list)
    },

    judgePre(str) {
      return (
        !this.userInfo.authorityString ||
        this.userInfo.authorityString.indexOf(str) == -1
      )
    },
    reset() {
      window.location.reload()
      // this.setIndicatorType(0)
      // const cityId = this.home.userInfoVo.cityId
      // this.setZoneId({ data: cityId, flag: true })
      // this.setType(11)
      // this.setModalFlag(false)
      // this.initBoundary()
      // this.setAllBoundaryType(null)
      // this.setBackType(1)
    },
    handleZoneId(e) {
      const cityId = this.home.userInfoVo.cityId
      if ((e == cityId || e == null) && this.routeAreaType == 5) {
        this.reset()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.map-bottom-left-box {
  display: flex;
  position: fixed;
  bottom: 15px;
  left: 120px;
}
// // 用于隐藏除第一个之外的地图选项
// .map-select-box>div:not(:first-child){
//   display: none;
// }
// .map-select-box:hover div{
//   display: block;
// }

.map-select-box > div {
  width: 65px;
  height: 40px;
  border: 1px solid #dcdfe6;
  position: relative;
  margin-right: 5px;
  cursor: pointer;
}
.sel-border {
  border-color: #0283e1;
}
.map-select-box span {
  padding: 0 5px;
  color: #fff;
  background: #0283e1;
  border-radius: 0px 0px 4px 0px;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 12px;
}
.map-select-box img {
  width: 100%;
  height: auto;
}

.el-form {
  width: 100%;
  height: 40px;
  min-height: 40px;
  background-color: #fafafa;
}

// 表单盒子
.form-box {
  width: 100%;
  // height: 100%;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  .public-area {
    // width: 50%;
    height: 100%;
    // flex: 1;
    padding-right: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .customInput1 {
      width: 130px;
      min-width: 50px;
    }

    .customInput {
      width: 160px;
      min-width: 50px;
    }
  }

  // 右侧横杠样式
  .public-border {
    height: 100%;
    padding-left: 5px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #bac1cb;
  }
  .right-content {
    display: flex;
    align-items: flex-start;
    height: fit-content;
  }
  .right-area {
    // height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    // padding-left: 20px;
    .lt-btn-box {
      display: flex;
      align-items: center;
    }
  }

  .public-area-two {
    // width: 60%;
    height: 100%;
    flex: 1;
    height: 100%;
    // padding-right: 20px;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    // justify-content: space-between;

    > div {
      margin-right: 20px;
    }
  }

  .right-area-two {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
    > div:first-child {
      margin-right: 20px;
      min-width: 105px;
    }
  }
  .bottom-box {
    position: absolute;
    top: 45px;
    left: -10px;
    // background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    display: flex;
    align-items: center;
  }

  .right-box-go-back {
    position: absolute;
    top: 45px;
    right: 5px;
    .btn-back {
      border: 1px solid #4a70ae;
      color: #4a70ae;
      padding: 7px 16px;
    }
  }

  .search-box {
    position: absolute;
    right: 0px;
    top: 50px;
  }
}
// 公共区域

.margin-right10 {
  margin-right: 10px;
}

// 标签修改成下拉 的样式
.el-dropdown-link {
  cursor: pointer;
  width: 65px;
  text-align: center;
}

.gis-search-bar {
  font-size: 12px;
}
.search-switchs {
  position: absolute;
  top: 130px;
  left: 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  div {
    display: flex;
    align-items: center;
    margin-right: 8px;
  }
}
// 健康检查 图例
.map-legend {
  position: fixed;
  border-radius: 5px;
  bottom: 80px;
  left: 80px;
  width: 125px;
  // height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;

  .longitude-legend,
  .azimuth-legend {
    > div:first-child {
      margin-bottom: 10px;
    }
    > div {
      display: flex;
      align-items: center;

      > img {
        height: 30px;
        margin-right: 15px;
      }
    }
  }

  .azimuth-legend {
    > div {
      height: 30px;
      > span:first-child {
        flex: 1;
        height: 100%;
        margin-right: 15px;
        position: relative;
        &::after {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: -16px;
          border-bottom: 3px dashed #ef523b;
        }
      }
    }

    > div:nth-child(2) > span:first-child::after {
      border-bottom: 3px solid #2afb22;
    }
  }
}

// 筛选弹框
.filter-content {
  > div:first-child {
    .filter-content-box {
      border: 1px solid #999;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-flow: column;
      margin-bottom: 10px;

      > div:not(:first-child) {
        margin-top: 10px;
      }
      > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div:first-child {
          width: 200px;
          margin-right: 20px;
        }
        > div:nth-child(2) {
          flex: 1;
        }
      }
    }
    > div:last-child {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .filter-rule {
    > div:first-child {
      text-indent: 20px;
      margin-bottom: 10px;
      > span {
        font-size: 12px;
        color: #999;
        margin-left: 6px;
      }
    }
    > div:last-child {
      border: 1px solid #ccc;
      padding: 10px;
      height: 100px;
      overflow-y: auto;
      > div {
        cursor: pointer;
        &:hover {
          background-color: #ccc;
        }
      }
    }
  }
}
</style>
